<template>
    <div>
        <Card :bordered="false" dis-hover class="ivu-mt">
            <Row :gutter="16" type="flex" justify="space-between" align="middle">
                <Col>
                    <Row :gutter="16" type="flex">
                        <Col>
                            <Select v-model="params.member_id" placeholder="选择归属人" clearable style="width:200px" @on-change="askData">
                                <OptionGroup :label="item.label" v-for="(item,index) in member_list" :key="index">
                                    <Option v-for="it in item.children" :value="it.value" :key="it.value">{{ it.label }}</Option>
                                </OptionGroup>
                            </Select>
                        </Col>
                        <Col>
                            <Select v-model="model" placeholder="选择设备微信" clearable style="width:200px" @on-change="askDatas">
                                <Option v-for="item in tagalllists" :value="item.wechatid" :key="item.wechatid">{{ item.tag_name||item.wechatid }}</Option>
                            </Select>
                        </Col>
                        <Col>
                            <font color="#ff9900" style="font-size:22px"><Icon type="ios-alert" /><span style="font-size:16px" class="ivu-ml-8">若编辑标签失败，请等待三秒后刷新页面。</span></font>
                        </Col>
                    </Row>
                </Col>
            </Row>
             <Form>
                 <template v-for="(item,index) in tagalllist">
                    <FormItem v-if="item.member_id == member_id" :key="index">
                        <template>
                            <p class="ivu-mt-16 ivu-mb-8" >
                                <strong class="ivu-mr-16">微信号：{{item.tag_name}} - 归属人：{{item.realname}}</strong>
                                <Button type="primary" @click="handleAdd(item.wechatid, item.isonline != 0)">新增标签</Button>
                            </p>
                            <template v-for="it in item.children">
                                <!-- <Button v-if="item.isonline != 0" class="ivu-mr-8" disabled :key="it.tag_id">{{ it.tag_name }}</Button> -->
                                <span style="padding: 8px 15px;border: 1px solid #dcdee2;border-radius: 4px;margin-left:8px">
                                    <span style="cursor: pointer;" @click="handleSubmit(item.wechatid,it, item.isonline != 0)">{{ it.tag_name }}</span><Icon @click="handleRemove(item.wechatid,it, item.isonline != 0)" class="ivu-ml-16 closetag" type="md-close" />
                                </span>
                            </template>
                        </template>
                    </FormItem>
                </template>
                
                 <template v-for="(item,index) in tagalllist">
                    <FormItem v-if="item.member_id != member_id" :key="index">
                        <template>
                            <p class="ivu-mt-16" ><strong class="ivu-mr-16">微信号：{{item.tag_name}} - 归属人：{{item.realname}}</strong></p>
                            <Button class="ivu-mr-8 ivu-mt-8" disabled v-for="it in item.children" :key="it.tag_id">{{ it.tag_name }}</Button>
                        </template>
                    </FormItem>
                </template>
            </Form>
        </Card>
        <wxmodal ref="wxmodal" @askData="askData"/>
         <Modal v-model="edittagmodal" title="编辑标签" :mask-closable="false" @on-cancel="cancel">
            <Form :rules="rules" ref="creates" :model="edittagparams" >
                <FormItem prop="LabelName" label="标签名称">
                    <Input type="text" v-model="edittagparams.LabelName" placeholder="请输入标签名称"></Input>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button :loading="loading" @click="cancel">取消</Button>
                <Button type="primary" :loading="loading" @click="submitParams">保存</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    import { customerwechattagslist, customerwechattagsinfo } from "@/api/hqapi";
    import util from '@/libs/util'
    import wxmodal from './wxmodal'
  import { mapState, mapMutations } from "vuex";
    export default {
        components: { wxmodal },
        name: "diagnosis",
        data() {
            return {
                edittagmodal: false,
                modal: false,
                loading: false,
                model: '',
                member_list: [],
                tagalllist: [],
                tagalllists: [],
                member_id: util.cookies.get('uuid'),
                params: { member_id: '', search_all: 1 },
                rules: { LabelName: [{ required: true, message: '请输入标签名称', trigger: 'blur' }] },
                edittagparams: {
                    WeChatId:'', // 商家所属微信号
                    AddList:'',
                    LabelId: '',
                    LabelName: '',
                    taskId: new Date().getTime() * 10000 + parseInt(Math.random() * 10000)
                },
            };
        },
        computed: {
            ...mapState("power/export", ["wsIsConnect"]),
        },
        created() {
            this.initial();
        },
        methods: {
            initial() {
                this.askData()
            },
            askData() {
                let params = {
                    search_all: 1,
                    member_id: this.params.member_id?this.params.member_id:''
                }
                customerwechattagslist(params).then(res=>{
                    if (this.member_list.length == 0) {
                        this.member_list = res.condition.member_list
                    }
                    this.tagalllists = JSON.parse(JSON.stringify(res.list))
                    this.tagalllist = res.list
                    this.model = ''
                    this.askDatas()
                })
            },
            askDatas() {
                this.tagalllist = []
                if (!this.model) {
                    this.tagalllist = this.tagalllists
                } else {
                    for (let item of this.tagalllists) {
                        if (this.model == item.wechatid) {
                            this.tagalllist = [item]
                        }
                    }
                }
            },
            handleAdd(wechatid, bool) {
                if (bool) this.$Message.error("设备不在线，请重新登录设备");
                else this.$refs.wxmodal.initial(wechatid)
            },
            handleRemove(wechatid, item, bool) {
                if (bool) this.$Message.error("设备不在线，请重新登录设备");
                else {
                    this.$Modal.confirm({
                        title: "删除标签",
                        content:"<p>确定删除标签后，微信标签也会随之删除</p>",
                        loading: true,
                        onOk: () => {
                            let params = {
                                MsgType: 'ContactLabelDeleteTask',
                                Content: {
                                    WeChatId: wechatid, // 商家所属微信号
                                    LabelId: item.tag_id,
                                    taskId: new Date().getTime() * 10000 + parseInt(Math.random() * 10000)
                                }
                            }
                            if (this.wsIsConnect) {
                                this.$websocket.sendSock(params);
                                setTimeout(()=>{
                                    this.$Modal.remove();
                                    this.askData()
                                },3000)
                            } else {
                                this.$Message.error("ws未连接上");
                            }
                        },
                    });
                }
            },
            handleSubmit(wechatid, item, bool) {
                if (bool) this.$Message.error("设备不在线，请重新登录设备");
                else {
                    customerwechattagsinfo({wechatid,tag_id:item.tag_id}).then(res=>{
                        this.edittagparams.WeChatId = wechatid
                        this.edittagparams.LabelId = item.tag_id
                        this.edittagparams.LabelName = item.tag_name
                        this.edittagparams.AddList = res.friendids
                        this.edittagmodal = true
                    })
                }

            },
            cancel() {
                this.edittagmodal = false
            },
            submitParams() {
                this.$refs.creates.validate((valid) => {
                    if (valid) {
                        this.loading = true
                        let params = {
                            MsgType: 'ContactLabelTask',
                            Content: this.edittagparams
                        }
                        if (this.wsIsConnect) {
                            this.$websocket.sendSock(params);
                            setTimeout(()=>{
                                this.askData()
                                this.loading = false
                                this.edittagmodal = false
                            },3000)
                        } else {
                            this.$Message.error("ws未连接上");
                        }
                    }
                })
            },
        },
    };
</script>
<style lang="less" scoped>
.closetag:hover{
    background: #ed4014;
    color: #fff;
    cursor: pointer;
}
</style>